<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>时间罗盘</title>
  <link rel="stylesheet" href="./css/clock.css">
</head>

<body>

  <ul class="clock" id="helang-clock">
    <hr>
  </ul>

  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./js/clock.js"></script>
  <script type="text/javascript">
    $("#helang-clock").clock();
  </script>

</body>
<script type="text/javascript">
  $(document).ready(function () {
    var backgrounds = [
      "./image/a0.jpg",
      "./image/a2.jpg",
      "./image/a3.jpg",
      "./image/a5.jpg",
      "./image/a6.jpg",
      "./image/a8.jpg",
      "./image/b1.jpg",
      "./image/b2.jpg",
      "./image/b3.jpg",
      "./image/b4.jpg",
      "./image/b5.jpg",
    ];
    var current = 0;
    function nextBackground () {
      current++;
      console.log(current)
      if (current > backgrounds.length - 1) {
        current = 0
        $('body').css('background-image', 'url(' + backgrounds[0] + ')');
      }
      $('body').css('background-image', 'url(' + backgrounds[current] + ')');
    }
    setInterval(nextBackground, 5000);

  });

</script>

</html>